import React from "react";
import { css } from "@emotion/react";
import {
	Box,
	Image,
	Text,
	Button,
	Input,
	Popover,
	Modal,
	ModalBody,
	ModalOverlay,
	ModalContent,
	ModalHeader,
	ModalFooter,
	FormControl,
	FormLabel,
	PopoverTrigger,
	useDisclosure,
	useToast,
} from "@chakra-ui/react";
const quickLinkBoxCss = css`
	position: relative;
	width: 100px;
	height: 100px;
	boder: 1px soilid orange;
	float: left;
	margin-top: 20px;
	margin-right: 20px;
	cursor: pointer;
`;
const avatorCss = css`
	background-color: #eee;
	width: 50px;
	height: 50px;
	border-radius: 25px;
	overflow: hidden;

	margin: 0 auto;

	display: flex;
	justify-content: center;
	align-items: center;

	> img {
		width: 50%;
		height: 50%;
		object-fit: container;
	}
`;
const oneLineEllipsis = css`
	margin: 4px 0px;
	font-size: 12px;
	text-align: center;

	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
`;
export default function QuckItemAdd({ data, onAdd }) {
	const { onOpen, onClose, isOpen } = useDisclosure();
	const toast = useToast();
	const firstFieldRef = React.useRef(null);
	const webNameRef = React.useRef(null);
	const webUrlRef = React.useRef(null);

	const showToast = (msg, position = "top", bgColor = "#eabe00") => {
		toast({
			position: position,
			render: () => (
				<Box color="white" p={3} bg={bgColor}>
					{msg}
				</Box>
			),
		});
	};

	function isUrl(url) {
		return /^(https?:\/\/(([a-zA-Z0-9]+-?)+[a-zA-Z0-9]+\.)+[a-zA-Z]+)(:\d+)?(\/.*)?(\?.*)?(#.*)?$/.test(
			url
		);
	}

	const addWebQucik = () => {
		// console.log(webNameRef, webUrlRef);
		let name = webNameRef && webNameRef.current && webNameRef.current.value;
		let url = webUrlRef && webUrlRef.current && webUrlRef.current.value;
		if (name && url) {
			if (isUrl(url)) {
				onAdd &&
					onAdd({
						name,
						url,
					});
				onClose();
			} else {
				showToast("网址格式不正确", "top", "#bd3638");
			}
		} else {
			showToast("请填写完整网址名字和网址");
		}
	};

	return (
		<Box css={quickLinkBoxCss}>
			<Modal isOpen={isOpen} onClose={onClose} isCentered>
				<ModalOverlay />
				<ModalContent>
					<ModalHeader fontWeight="normal" fontSize="18px" p="20px">添加快捷方式</ModalHeader>
					<ModalBody px="20px" py="0">
						<FormControl>
							<FormLabel fontWeight="500" fontSize="13px">名称</FormLabel>
							<Input
								placeholder="请输入网址名称"
								ref={webNameRef}
							/>
								{/* <Input ref={webNameRef} variant="flushed" bg="#f1f3f4" h="32px" py="6px" paddingX="8px" borderRadius="2px" /> */}
							</FormControl>
							<FormControl mt={4}>
							<FormLabel fontWeight="500" fontSize="13px">网址</FormLabel>
							<Input placeholder="请输入网址" ref={webUrlRef} />
							{/* <Input {...webUrlRef} variant="flushed" bg="#f1f3f4" h="32px" py="6px" px="8px" paddingX="8px" borderRadius="2px"/> */}
						</FormControl>
					</ModalBody>
					<ModalFooter>
						<Button mr={3} onClick={onClose}>
						取消
						</Button>
						<Button onClick={addWebQucik}>完成</Button>
					</ModalFooter>
				</ModalContent>
			</Modal>
			<Popover
				isOpen={isOpen}
				initialFocusRef={firstFieldRef}
				onOpen={onOpen}
				// onClose={onClose}
			>
				<PopoverTrigger>
					<Box>
						<Box css={{ ...avatorCss }}>
							<Image src={data.icon} />
						</Box>
						<Text css={oneLineEllipsis}>{data.name}</Text>
					</Box>
				</PopoverTrigger>
				{/* <PopoverContent w="300px">
					<PopoverArrow />
					<PopoverCloseButton />
					<PopoverHeader>添加快捷方式</PopoverHeader>
					<PopoverBody>
						<Box>
							<Input
								placeholder="请输入网址名称"
								ref={webNameRef}
							/>
						</Box>
						<Box mt="20px">
							<Input placeholder="请输入网址" ref={webUrlRef} />
						</Box>
						<Box mt="20px">
							<Button mr="20px" onClick={addWebQucik}>
								确认
							</Button>
							<Button onClick={onClose}>取消</Button>
						</Box>
					</PopoverBody>
				</PopoverContent> */}
			</Popover>
		</Box>
	);
}
